<template>
  <div class="app-container clearfix">
    <!-- 员工信息 -->
    <employee-info
      :employee-detail="employeeDetailInfo"></employee-info>
    <!-- 列表 -->
    <uniform-table
      :data="listData"
      :search-params="searchKey"
      :total-count="totalCount"
      :list-loading="listLoading"
      @on-init="handleInitList"
      @on-edit="handleEditShow"
      @on-delete="handleDelete"></uniform-table>
    <!-- 编辑弹出框 -->
    <uniform-edit
      :visible.sync="editInfo.visible"
      :detail-data="editInfo.detailInfo"
      :employee-id="searchKey.employeeId"
      @create="handleCreated"
      @update="handleUpdated"></uniform-edit>
  </div>
</template>

<script>
  import { getRecordDetailAPI } from '@/api/employee/record'
  import { getUniformListAPI, deleteUniformAPI } from '@/api/employee/uniform'
  import { EmployeeInfo, UniformTable, UniformEdit } from './components'

  export default {
    name: 'UniformList',
    mixins: [],
    components: {
      EmployeeInfo,
      UniformTable,
      UniformEdit
    },
    data() {
      return {
        initParams: { // 初始化参数
          pageNum: 1, // 当前页数
          pageSize: 10, // 每页个数
          employeeId: ''
        },
        searchKey: {}, // 搜索参数
        editInfo: { // 编辑弹出框
          visible: false, // 是否显示模态框
          detailInfo: {}
        },
        totalCount: 0, // 分页用的列表总条数
        listLoading: false,
        employeeDetailInfo: {}, // 员工档案详情
        listData: [] // 列表数据
      }
    },
    props: {
      employeeId: {
        type: [Number, String],
        default: ''
      }
    },
    computed: {},
    methods: {
      handleEditShow(data = {}) { // 编辑－显示弹出框
        this.editInfo.visible = true
        this.editInfo.detailInfo = data
      },
      handleCreated() { // 添加成功
        this.searchKey.pageNum = 1
        this.getListData()
      },
      handleUpdated() { // 编辑成功
        this.getListData()
      },
      handleDelete(data = {}) { // 删除
        this.$confirm('确定要删除吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.deleteUniformData(data.id)
        }).catch(() => {
        })
      },
      handleInitList(params = {}) { // 初始化列表
        this.searchKey = {
          ...this.searchKey,
          ...params
        }
        this.getListData()
      },
      async deleteUniformData(id) { // 添加－请求数据
        try {
          let response = await deleteUniformAPI({
            id
          })
          let result = response
          if (+result.code === 200) {
            this.handleInitList()
            this.$notify({
              title: '成功',
              message: '删除成功！',
              type: 'success',
              duration: 2000
            })
          } else {
            this.$notify.error({
              title: '错误',
              message: result.msg || '删除失败！'
            })
          }
        } catch (error) {
          // console.log(error)
          this.$notify.error({
            title: '错误',
            message: error.message || '删除失败！'
          })
        }
      },
      async getRecordDetailData() { // 获取员工档案详情－请求数据
        try {
          let { employeeId } = this.searchKey
          let response = await getRecordDetailAPI({
            id: employeeId
          })
          let result = response
          if (+result.code === 200) {
            this.employeeDetailInfo = result.data
          } else {
            this.$notify.error({
              title: '错误',
              message: result.msg || '获取失败！'
            })
          }
        } catch (error) {
          // console.log(error)
          this.$notify.error({
            title: '错误',
            message: error.message || '获取失败！'
          })
        }
      },
      async getListData() { // 获取列表数据
        try {
          let { searchKey } = this
          this.listLoading = true
          let response = await getUniformListAPI({
            ...searchKey
          })
          let result = response
          if (+result.code === 200) {
            this.listData = result.rows || []
            this.totalCount = result.total || 0
          } else {
            this.$notify.error({
              title: '错误',
              message: result.msg || '获取列表失败！'
            })
          }
        } catch (error) {
          // console.log(error)
          this.$notify.error({
            title: '错误',
            message: error.message || '获取列表失败!'
          })
        } finally {
          this.listLoading = false
        }
      },
      async initBeforeRoute(obj, to, from) { // 初始化页面
        let { employeeId } = to.query
        obj.searchKey.employeeId = employeeId
        obj.initData()
        obj.getRecordDetailData()
      },
      async initData() { // 初始化数据
        this.getListData()
      }
    },
    watch: {
      initParams: {
        handler: function(newVal, oldVal) {
          if (JSON.stringify(newVal) !== JSON.stringify(this.searchKey)) {
            this.searchKey = JSON.parse(JSON.stringify(newVal))
          }
        },
        deep: true,
        immediate: true
      }
    },
    created() {
    },
    mounted() {
    },
    beforeRouteEnter(to, from, next) {
      // console.log(to)
      // console.log(from)
      next(vm => {
        vm.initBeforeRoute(vm, to, from)
      })
    },
    beforeRouteUpdate(to, from, next) {
      // console.log(to)
      // console.log(from)
      this.initBeforeRoute(this, to, from)
      next()
    }
  }
</script>

<style lang="scss" scoped>
  .app-container {
    &-left {
      width: 220px;
      float: left;
    }

    &-right {
      margin-left: 250px;
    }
  }
</style>
